<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员信息查询</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Bootstrap Table CSS -->
    <link href="/css/bootstrap-table.min.css" rel="stylesheet">
    <!-- 引入外部自定义样式 -->
    <link href="/css/select.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1 class="text-center mb-4">会员信息查询画面</h1>

    <!-- 查询表单 -->
    <div class="card p-4 mb-4 shadow-sm">
        <form class="row g-3" th:action="@{/userController/doSearch}">
            <div class="col-md-6">
                <label for="idInput" class="form-label">编号</label>
                <input type="text" class="form-control" id="idInput" name="userId" placeholder="请输入编号">
            </div>
            <div class="col-md-6">
                <label for="phoneInput" class="form-label">手机号</label>
                <input type="text" class="form-control" id="phoneInput" name="userTel" placeholder="请输入手机号">
            </div>
            <div class="col-12 d-flex justify-content-between mt-3">
                <button class="btn btn-primary">搜索</button>
                <a th:href="@{/userController/goAdd}" class="btn btn-success">添加</a>
            </div>
        </form>
    </div>

    <!-- 数据表格 -->
    <table id="table"
           data-toggle="table"
           data-search="true"
           data-pagination="true"
           data-show-columns="true"
           data-toolbar="#toolbar"
           class="table table-hover table-bordered align-middle">
        <thead class="table-dark">
        <tr>
            <th data-field="id">#</th>
            <th data-field="code">编号</th>
            <th data-field="name">名字</th>
            <th data-field="score">积分</th>
            <th data-field="phone">手机号</th>
            <th data-field="gender">性别</th>
            <th data-field="action">操作</th>
        </tr>
        </thead>
        <tbody>
        <!--        使用了 ${user.userId} 作为 deleteUser 函数的参数，这在 JavaScript 中可能无法正确地渲染-->
        <tr th:each="user, i : ${userList}">
            <td th:text="${i.count}"></td>
            <td th:text="${user.userId}"></td>
            <td th:text="${user.userName}"></td>
            <td th:text="${user.userScore}"></td>
            <td th:text="${user.userTel}"></td>
            <td th:text="${user.userSex}"></td>
            <td>
                <a href="#" class="btn btn-sm btn-warning me-2">修改</a>
                <!-- 通过 th:attr 动态设置 onclick -->
                <a href="#" class="btn btn-sm btn-danger" th:attr="onclick='deleteUser(' + ${user.userId} + ')'" >删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 引入 Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
<!-- 引入 Bootstrap Table JS -->
<script src="/js/bootstrap-table.min.js"></script>
<script>
    function deleteUser(userId) {
        if (confirm("确定要删除该用户吗？")) {
            // 使用 fetch 发起请求
            fetch(`/userController/delete/${userId}`, {
                method: 'DELETE', // 删除请求
                headers: {
                    'Content-Type': 'application/json',
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert("删除成功！");
                        location.reload(); // 刷新页面
                    } else {
                        alert("删除失败，请重试！");
                    }
                })
                .catch(error => {
                    alert("网络错误，请稍后再试！");
                });
        }
    }
</script>
</body>
</html>
